<template>
  <div class="goods-box">
    <div class="list-wrapper">
      <ul class="goodsList-container">
        <Card v-for="item in list" :key="item.name" :info="item">{{ item.name }}</Card>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Card from '../../components/Card'

export default {
  name: 'Goods',
  computed: mapState({
    'list': state => state.goodsList
  }),
  components: {
    'Card': Card
  }
}
</script>

<style lang='scss'>
  .goods-box{
    margin-top: 80px;
  }
  .list-wrapper ul{
    list-style: none;
    overflow: hidden;
    padding-bottom: 36px;
  }

  .goodsList-container{
    @media screen and (max-width: 600px) {
      display: grid;
      display: -moz-grid;
      display: -ms-grid;
      grid-template-columns: 1fr 1fr;
      padding: 0;

      .goods-wrapper{
        width: unset;
        margin: 0;
        box-sizing: border-box;
      }
    }
  }
</style>
